<template>
	<view class="bg min100">
		<u-sticky h5-nav-height="0">
			<view class="status_bar bg-blue">
			</view>
			<view class="bg-blue white">
				<u-tabs :list="tabList" font-size="32" bg-color="#120062" height="90" active-color="#fff"
					inactive-color="#eee" :is-scroll="false" :current="index" @change="change"></u-tabs>
			</view>
		</u-sticky>
		<view class="pd-30">
			<empty v-if="!list||list.length==0" text="暂无订单"></empty>
			<view class="coupon_box">
				<view class="coupon-item" v-for="(item,index) in list" :key="index">
					<view class="coupon-money">
						<view class="nick">{{item.name}}</view>
						<view class="layof">￥{{item.money}}</view>
						<view class="end_time">{{item.end_time}}前使用</view>
						<view class="demand">满{{item.satisfy_money}}减{{item.money}}元</view>
						<view class="demand">使用者 {{item.user_info.nickname}}</view>
						<view class="demand">电话 {{item.user_info.phone}}</view>
					</view>
					<view class="get-btn">已核销</view>
				</view>
			</view>
			<!-- <view v-for="(item,i) in list" :key="i" class="mb-30">
				<orderItem v-if="current==0" :type="2" :item="item"></orderItem>
				<sfItem @update="change(current)" v-if="current==1" type="2" :item="item"></sfItem>
				<hyItem v-if="current==2" type="2" :item="item"></hyItem>
			</view> -->
			<u-loadmore v-show="list&&list.length>9" :status="status" icon-type="flower" bg-color="transperant"
				margin-top="30" margin-bottom="30" />
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import couponPage from '@/components/coolc-coupon/coolc-coupon';
	export default {
		components: {
			// ...mapState(['city', 'tabList'])
			couponPage
		},
		computed: {
			...mapState(['userInfo', 'token', 'tabList']),
		},
		data() {
			return {
				index: 0,
				current: '',
				timer3: null,
				page: 1,
				status: 'loadmore',
				list: []
			}
		},
		// computed: {
		// 	...mapState(['tabList'])
		// },
		// onLoad(option){
		//   if(option.tab){
		//     setTimeout(() => {
		//       this.change(option.tab)
		//     }, 1500)
		//   }
		// },
		onShow() {
			if(this.page!=1){
				this.page=1
			}
			this.getCouponOrder()
			// this.timer3 = setInterval(()=>{
			// 	if(this.tabList&&this.tabList[0]){
			// 		if(!this.current){
			// 			this.current = this.tabList[0].id
			// 		}
			// 		this.page = 1
			// 		this.list = []
			// 		this.status = 'loadmore'
			// 		if (this.current == 0) {
			// 			// this.getList1()
			// 		} else if (this.current == 1) {
			// 			// this.getList2()
			// 		}else if (this.current == 2) {
			// 			// this.getList3()
			// 		}
			// 		clearInterval(this.timer3)
			// 		this.timer3 = null
			// 	}
			// },200)
		},
		// onUnload() {
		// 	clearInterval(this.timer3)
		// },
		// onHide() {
		// 	clearInterval(this.timer3)
		// },
		onPullDownRefresh() {
			this.page = 1
			this.list = []
			this.getCouponOrder()
			// if (this.current == 0) {
			// 	// this.getList1()
			// } else if (this.current == 1) {
			// 	// this.getList2()
			// }else if (this.current == 2) {
			// 	// this.getList3()
			// }
		},
		onReachBottom() {
			// 避免多次触发
			if (this.status == 'loading' || this.status == 'nomore') {
				return;
			}
			this.page = this.page + 1
			this.getCouponOrder()
			// if (this.current == 0) {
			// 	// this.getList1()
			// } else if (this.current == 1) {
			// 	// this.getList2()
			// }else if (this.current == 2) {
			// 	// this.getList3()
			// }
		},
		methods: {
			// change(index) {
			// 	this.index = index;
			// 	this.current = this.tabList[index].id;
			// 	this.page = 1
			// 	this.list = []
			// 	this.status = 'loadmore'
			// 	if (this.current == 0) {
			// 		this.getList1()
			// 	} else if (this.current == 1) {
			// 		this.getList2()
			// 	}else if (this.current == 2) {
			// 		this.getList3()
			// 	}
			// },
			// getList1() {
			// 	this.$http('/addons/ddrive/order/order_info', {
			// 		order_type: 1,
			// 	}, "POST").then(res => {
			// 		this.list = res.data
			// 		uni.stopPullDownRefresh();
			// 	})
			// },
			// getList2() {
			// 	this.status = "loading"
			// 	this.$http('/addons/ddrive/sforder/order_list',{
			// 		page:this.page
			// 	}).then(res => {
			// 		let data = res
			// 		if (data.length < 10) {
			// 			this.status = "nomore"
			// 		} else {
			// 			this.page = this.page + 1
			// 			this.status = "loadmore"
			// 		}
			// 		this.list = this.list.concat(data)
			// 		uni.stopPullDownRefresh();
			// 	})
			// },
			// getList3() {
			// 	this.status = "loading"
			// 	this.$http('/addons/ddrive/hyorder/order_list',{
			// 		page:this.page,
			// 		type:1
			// 	}).then(res => {
			// 		let data = res.data
			// 		if (data.length < 10) {
			// 			this.status = "nomore"
			// 		} else {
			// 			this.page = this.page + 1
			// 			this.status = "loadmore"
			// 		}
			// 		this.list = this.list.concat(data)
			// 		uni.stopPullDownRefresh();
			// 	})
			// },
			async getCouponOrder() {
				this.$http('/api/coupon/getCouponOrder', {
					page: this.page,
					limit: 10
				}).then(res => {
					let data = res
					if (res.length < 10) {
						this.status = "nomore"
					} else {
						
						this.status = "loadmore"
					}
					if(this.page==1){
						this.list=res
					}else{
						if(data.length<1){
							this.status = "nomore"
						}else{
							this.status = "loadmore"
							this.list = this.list.concat(data)
						}
						
					}
					
					setTimeout(()=>{
						uni.stopPullDownRefresh();
					},1500)
					
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.coupon-item {
		width: 100%;
		height: auto;
		display: table;
		border-radius: 10upx;
		padding: 0 20upx;
		margin-top: 22upx;
		border: 1px solid #eeeeee;
		position: relative;
		background-color: white;

		.coupon-money {
			width: 465upx;
			height: auto;
			display: table;
			float: left;
			padding: 26upx 0;
			border-style: none dotted none none;
			border-color: #eeeeee;

			.nick {
				width: 100%;
				height: 50upx;
				line-height: 30upx;
				font-size: $font-sm;
				color: $font-color-999;
			}

			.tit {
				width: 100%;
				height: 50upx;
				line-height: 50upx;
				font-size: $font-sm;
				color: $font-color-999;
			}

			.demand {
				width: 100%;
				height: 30upx;
				line-height: 30upx;
				font-size: $font-sm;
				color: $font-color-999;
			}

			.layof {
				width: 100%;
				height: 48upx;
				line-height: 30upx;
				font-size: 44upx;
				color: #ff9000;
				font-weight: bold;
			}

			.end_time {
				width: 100%;
				height: 30upx;
				line-height: 30upx;
				font-size: $font-sm;
				color: $font-color-999;
			}
		}

		.get-btn {
			width: 146upx;
			height: 52upx;
			line-height: 50upx;
			position: absolute;
			top: 50%;
			right: 26upx;
			margin-top: -26upx;
			text-align: center;
			border-radius: 60upx;
			color: #999;
			border: 1px solid #999;
			font-size: $font-sm;
			float: right;
		}
	}

	.coupon-item:after {
		width: 40upx;
		height: 20upx;
		position: absolute;
		left: 460upx;
		top: -1px;
		border-radius: 0 0 40upx 40upx;
		content: "";
		display: block;
		background: $bgcolor_white;
		border: 1px solid #eeeeee;
		border-top: 0px;
	}

	.coupon-item:before {
		width: 40upx;
		height: 20upx;
		position: absolute;
		left: 460upx;
		bottom: -1px;
		border-radius: 40upx 40upx 0 0;
		content: "";
		display: block;
		background: $bgcolor_white;
		border: 1px solid #eeeeee;
		border-bottom: 0px;
	}
</style>
